<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">

<head>
    <!-- 页面meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>规格管理</title>
    <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" name="viewport">
    <link rel="stylesheet" href="/plugins/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/AdminLTE.css">
    <link rel="stylesheet" href="/plugins/adminLTE/css/skins/_all-skins.min.css">
    <link rel="stylesheet" href="../css/style.css">
	<script src="/plugins/jQuery/jquery-2.2.3.min.js"></script>
    <script src="/plugins/bootstrap/js/bootstrap.min.js"></script>
	<!-- 引入整个common页面 -->
	<div th:replace="common/common :: head"></div>
</head>

<body class="hold-transition skin-red sidebar-mini" >
	<div class="box-header with-border">
		<h3 class="box-title">规格管理</h3>
	</div>
	<div id="toolbar">
		<input type="button" value="添加" onclick="addSpecification()">
	</div>
	<table id="table"></table>
</body>
</html>
<script>
	$('#table').bootstrapTable({
		url: '/specification/getSpecificationInfo',
		method: 'post',//请求方式
		contentType: "application/x-www-form-urlencoded",//如果发送的是post请求，因为bootstap table使用的是ajax方式获取数据，这时会将请求的content type默认设置为 text/plain，这样在服务端直接通过 @RequestParam参数映射是获取不到的。这时就需要在bootstrap-table的参数列表中显式设置：
		toolbar: '#toolbar',    //工具按钮用哪个容器
		striped: true,//是否显示行间隔色
		cache: false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
		//pagination: true,//是否显示分页（*）
		//sidePagination: "server",//分页方式：client客户端分页，server服务端分页（*）
		//pageNumber: 1,//初始化加载第一页，默认第一页,并记录
		//pageSize: 5,//每页的记录行数（*）
		//pageList: [5, 10, 15],//可供选择的每页的行数（*）
		showColumns: true,//是否显示所有的列（选择显示的列）
		showRefresh: true,//是否显示刷新按钮
		minimumCountColumns: 2,             //最少允许的列数
		clickToSelect: true,                //是否启用点击选中行
		showToggle: true,                   //是否显示详细视图和列表视图的切换按钮
		detailView: true,                  //是否显示父子表
		//得到查询的参数
		queryParams : function (params) {
			//这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
			var temp = {
				pageSize: params.limit,                         //每页条数
				pageNum: (params.offset / params.limit) + 1,    //当前页数
				//条件查询 将数据传送到后台
				/*username:$("#username").val(),
				ubirthday:$("#ubirthday").val(),
				starTime:$("#starTime").val(),
				endTime:$("#endTime").val(),*/
			};
			return temp;
		},
		columns: [
			{
				checkbox: true,
				visible: true                  //是否显示复选框
			}, {
				field: 'id',
				title: '规格ID'
			}, {
				field: 'specName',
				title: '规格名称'
			}, {
				title: '操作',
				formatter : function(value, row ,index){
					return "<a class='btn btn-danger1' href='javascript:deleteInfo("+row.id+")'><span class='glyphicon glyphicon-trash'></span></a>" +
							"<a class='btn btn-info1' href='javascript:updateInfo("+row.id+")'><span class='glyphicon glyphicon-edit'></span></a>";
				}
			}
		]
	});

	//刷新table   用户删除修改增加 关闭模态窗口时刷新table所用   也就是刷新上面的js代码
	function getData(){
		$('#table').bootstrapTable("refresh");
	}

	//增加规格
	function addSpecification(){
		//BootstrapDialog模态框
		BootstrapDialog.show({
			title: '添加规格',
			size: BootstrapDialog.SIZE_BIG,
			//加载远程页面
			message: $('<div></div>').load('/specification/toAddSpecificationPage'),
			buttons: [{
				label: '取消',
				action: function (dialog) {
					dialog.close();//关闭模态框
				}
			}, {
				label: '添加',
				action: function (dialog) {
                    var result = [];
                    $("#tableId").find("tr").each(function(){
                        var tdArr = $(this).children();
                        var optionName = tdArr.eq(0).find("input").val();
                        var orders = tdArr.eq(1).find("input").val();
                        var obj = '{"optionName":"'+optionName+'","orders":'+orders+'}';
                        result.push(obj);
                    })

                    if(result.length <= 0){
                        alert("请添加规格选项");
                        return;
                    }

					$.ajax({
						url:"/specification/addSpecificationAndOption",
						type:"post",
						dataType:"text",
						data:{specName:$("#specName").val(),result:result},
						async:true,
						success:function(data){
							toastr.success("添加品牌成功");
							dialog.close(); //关闭模态框
							getData();
						},
						error:function(){
							toastr.error("添加品牌系统错误");
						}
					})
				}
			}]
		});
	}

	//修改
	function updateInfo(id){
		//BootstrapDialog模态框
		BootstrapDialog.show({
			title: '修改规格信息',
			size: BootstrapDialog.SIZE_BIG,
			//加载远程页面
			message: $('<div></div>').load('/specification/toUpdateSpecificationPage?id='+id),
			buttons: [{
				label: '取消',
				action: function (dialog) {
					dialog.close();//关闭模态框
				}
			}, {
				label: '修改',
				action: function (dialog) {
                    var result = [];
                    $("#tableId").find("tr").each(function(){
                        var tdArr = $(this).children();
                        var optionName = tdArr.eq(0).find("input").val();
                        var orders = tdArr.eq(1).find("input").val();
                        var obj = '{"optionName":"'+optionName+'","orders":'+orders+'}';
                        result.push(obj);
                    })

                    if(result.length <= 0){
                        alert("请添加规格选项");
                        return;
                    }
					$.ajax({
						url:"/specification/updateSpecification",
						type:"post",
						dataType:"text",
						data:{id:$("#sid").val(),specName:$("#specName").val(),result:result},
						async:true,
						success:function(data){
							toastr.success("修改品牌成功");
							dialog.close(); //关闭模态框
							getData();
						},
						error:function(){
							toastr.error("修改品牌系统错误");
						}
					})
				}
			}]
		});
	}

	//删除
	function deleteInfo(id){
		//BootstrapDialog模态框
		BootstrapDialog.show({
			title: '删除规格信息',
			size: BootstrapDialog.SIZE_SMALL,
			//加载远程页面
			message: "确认删除吗?",
			buttons: [{
				label: '取消',
				action: function (dialog) {
					dialog.close();//关闭模态框
				}
			}, {
				label: '删除',
				action: function (dialog) {
					$.ajax({
						url:"/specification/deleteSpecificationById",
						type:"post",
						dataType:"text",
						data:{id:id},
						async:true,
						success:function(data){
							toastr.success("删除规格成功");
							dialog.close(); //关闭模态框
							getData();
						},
						error:function(){
							toastr.error("删除规格系统错误");
						}
					})
				}
			}]
		});
	}
</script>